<template>
    <div class="app-container">
        <el-tabs type="border-card" v-model="activeName">
            <el-tab-pane label="4G资源大表" name="4g">
                <el-card shadow="always">
                    <el-form :model="queryParams" :inline="true" label-width="100px">
                        <!-- <el-form-item label="所属区县：" prop="county">
                            <el-select v-model="queryParams.county" placeholder="请选择所属区县" clearable
                                style="width: 240px">
                                <el-option v-for="dict in nhp_county_type_short" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="所属区县：" prop="county">
                            <el-select v-model="queryParams.county" placeholder="请选择所属区县" clearable
                                style="width: 240px">
                                <el-option v-for="dict in nhp_county_type" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="小区名">
                            <el-input v-model="queryParams.cellName" clearable placeholder="请输入小区名"
                                style="width: 240px" />
                        </el-form-item>
                        <el-form-item label="基站名">
                            <el-input v-model="queryParams.siteName" clearable placeholder="请输入基站名"
                                style="width: 240px" />
                        </el-form-item>
                        <el-form-item label="站型">
                            <el-select v-model="queryParams.siteType" placeholder="请选择站型" clearable
                                style="width: 240px">
                                <el-option v-for="item in siteTypeOptions" :key="item.value" :label="item.key"
                                    :value="item.value" />
                            </el-select> </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="Search" @click="list4gCellInfoList">查询</el-button>
                            <el-button @click="unsetQueryForm"><el-icon>
                                    <RefreshRight />
                                </el-icon>重置</el-button>
                        </el-form-item>

                    </el-form>
                </el-card>
                <el-card shadow="always" style="margin-top: 10px;min-height: 500px;padding-bottom: 3px;">
                    <div id="table" style="margin-top: 20px;">
                        <el-table v-loading="loading" ref="cellInfoTable" :data="cellInfoTableData4g"
                            style="width: 100%" @sort-change="sortChange" @filter-change="filterChange">
                            <el-table-column prop="enodebId" label="ENODEBID" width="100" align="center" fixed />
                            <el-table-column prop="county" label="区县" width="120" align="center" fixed />
                            <el-table-column prop="cgi" label="小区CGI" width="250" align="center" />
                            <el-table-column prop="cellName" label="小区名称" width="300" align="center" />
                            <el-table-column prop="machineRoomId" label="所属机房ID" width="200" align="center" fixed />
                            <el-table-column prop="microSiteFlag" label="是否小微站" width="120" align="center" />
                            <el-table-column prop="cellularType" label="蜂窝类型(小区)" width="120" align="center" />
                            <el-table-column prop="cellAreaType" label="小区区域类别" width="120" align="center" />
                            <el-table-column prop="eci" label="ECI" width="120" align="center" />
                            <el-table-column prop="is3dMimoFlag" label="3DMIMO小区" width="120" align="center" />
                            <el-table-column prop="hexStationNo" label="十六进制LTE基站编号" width="120" align="center" />
                            <el-table-column prop="hexEci" label="十六进制ECI" width="120" align="center" />
                            <el-table-column prop="hexTac" label="十六进制跟踪区码" width="120" align="center" />
                            <el-table-column prop="cellId" label="归属小区号" width="120" align="center" />
                            <el-table-column prop="tac" label="跟踪区码" width="120" align="center" />
                            <el-table-column prop="pci" label="PCI" width="150" align="center" />
                            <el-table-column prop="manufacturerName" label="厂商名称" width="150" align="center" />
                            <el-table-column prop="town" label="所属乡镇" width="150" align="center" />
                            <el-table-column prop="machineRoom" label="所属机房" width="150" align="center" />
                            <el-table-column prop="stationName" label="基站名称" width="150" align="center" />
                            <el-table-column prop="stationNo" label="站号" width="150" align="center" />
                            <el-table-column prop="longitude" label="经度" width="150" align="center" />
                            <el-table-column prop="latitude" label="纬度" width="150" align="center" />
                            <el-table-column prop="stationLevel" label="基站分级" width="120" align="center" />
                            <el-table-column prop="stationType" label="基站类型(基站)" width="120" align="center" />
                            <el-table-column prop="coverType" label="基站覆盖类型（室内室外）" width="120" align="center" />
                            <el-table-column prop="stationLifeStatus" label="基站生命周期状态" width="120" align="center" />
                            <el-table-column prop="coverageScene" label="覆盖场景" width="120" align="center" />
                            <el-table-column prop="centerFrequencyChannel" label="中心载频信道号" width="120" align="center" />
                            <el-table-column prop="workFrequency" label="工作频段" width="120" align="center" />
                            <el-table-column prop="frequencyOffset" label="频率偏置" width="120" align="center" />
                            <el-table-column prop="cellLifeStatus" label="小区生命周期状态" width="120" align="center" />
                            <el-table-column prop="antManufacturer" label="天线厂家_1" width="120" align="center" />
                            <el-table-column prop="antModel" label="天线型号_1" width="120" align="center" />
                            <el-table-column prop="antHeight" label="天线挂高_1" width="120" align="center" />
                            <el-table-column prop="antDirectionAngle" label="天线方向角_1" width="150" align="center" />
                            <el-table-column prop="antElectrDownAngle" label="电子下倾角_1" width="150" align="center" />
                            <el-table-column prop="antMechanicalDownAngle" label="机械下倾角_1" width="150" align="center" />
                            <el-table-column prop="antInnerDownAngle" label="内置下倾角_1" width="150" align="center" />
                            <el-table-column prop="antTotalDownAngle" label="总下倾角_1" width="150" align="center" />
                            <el-table-column prop="antFeederLength" label="馈线长度_1" width="200" align="center" />
                            <el-table-column prop="antGain" label="天线增益_1" width="150" align="center" />
                            <!-- <el-table-column fixed="right" label="操作" min-width="120" align="center">
                                <template #default="scope">
                                    <el-button link type="primary" size="small"
                                        @click="showDetailDialog(scope.row.id)">详情</el-button>
                                </template>
</el-table-column> -->
                        </el-table>
                        <!-- <el-pagination v-model:current-page="currentPage4g" v-model:page-size="pageSize4g"
                            :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager, next" :total="total4g"
                            @size-change="list4gCellInfoList" @current-change="list4gCellInfoList" /> -->
                        <pagination v-show="total4g > 0" :autoScroll="false" :total="total4g"
                            v-model:page="currentPage4g" v-model:limit="pageSize4g" @pagination="list4gCellInfoList" />
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="5G资源大表" name="5g">
                <el-card shadow="always">
                    <el-form :model="queryParams5g" :inline="true" label-width="100px">
                        <el-form-item label="所属区县：" prop="county">
                            <el-select v-model="queryParams5g.county" placeholder="请选择所属区县" clearable
                                style="width: 240px">
                                <el-option v-for="dict in nhp_county_type" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="小区名">
                            <el-input v-model="queryParams5g.cellName" clearable placeholder="请输入小区名"
                                style="width: 240px" />
                        </el-form-item>
                        <el-form-item label="基站名">
                            <el-input v-model="queryParams5g.siteName" clearable placeholder="请输入基站名"
                                style="width: 240px" />
                        </el-form-item>
                        <el-form-item label="站型">
                            <el-select v-model="queryParams5g.siteType" placeholder="请选择站型" clearable
                                style="width: 240px">
                                <el-option v-for="item in siteTypeOptions" :key="item.value" :label="item.key"
                                    :value="item.value" />
                            </el-select> </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="Search" @click="list5gCellInfoList">查询</el-button>
                            <el-button @click="unsetQueryForm"><el-icon>
                                    <RefreshRight />
                                </el-icon>重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-card shadow="always" style="margin-top: 10px;min-height: 500px;padding-bottom: 3px;">
                    <div id="table" style="margin-top: 20px;">
                        <el-table v-loading="loading" ref="cellInfoTable" :data="cellInfoTableData5g"
                            style="width: 100%" @sort-change="sortChange" @filter-change="filterChange">
                            <el-table-column prop="county" label="区县" width="120" align="center" fixed />
                            <el-table-column prop="cgi" label="小区CGI" width="250" align="center" />
                            <el-table-column prop="networkMode" label="组网方式" width="200" align="center" />
                            <el-table-column prop="workFrequency" label="工作频段" width="120" align="center" />
                            <el-table-column prop="microSiteFlag" label="是否微基站" width="120" align="center" />
                            <el-table-column prop="hexEci" label="十六进制ECI" width="120" align="center" />
                            <el-table-column prop="hexTac" label="十六进制跟踪区码" width="120" align="center" />
                            <el-table-column prop="stationAreaType" label="基站区域类型" width="120" align="center" />
                            <el-table-column prop="cellId" label="小区ID" width="120" align="center" />
                            <el-table-column prop="cellularType" label="蜂窝类型" width="300" align="center" />
                            <el-table-column prop="nrCellName" label="NRCELL名称" width="120" align="center" />

                            <el-table-column prop="cellCi" label="小区码CI" width="200" align="center" fixed />
                            <el-table-column prop="tac" label="跟踪区码TAC" width="120" align="center" />
                            <el-table-column prop="gnodeb" label="所属GNODEB" width="120" align="center" />
                            <el-table-column prop="coverType" label="覆盖类型" width="120" align="center" />
                            <el-table-column prop="coverageScene" label="覆盖场景" width="120" align="center" />
                            <el-table-column prop="cellLifeStatus" label="生命周期状态(小区)" width="120" align="center" />
                            <el-table-column prop="pci" label="PCI" width="120" align="center" />
                            <el-table-column prop="lyFlag" label="是否拉远小区" width="120" align="center" />
                            <el-table-column prop="cellAreaType" label="CELL区域类别" width="120" align="center" />
                            <el-table-column prop="bbu" label="所属BBU" width="150" align="center" />
                            <el-table-column prop="aauStationName" label="所属站点名称(AAU)" width="150" align="center" />
                            <el-table-column prop="aauMachineRoom" label="所属机房名称(AAU)" width="150" align="center" />
                            <el-table-column prop="aauManufacturer" label="厂家名称(AAU)" width="150" align="center" />
                            <el-table-column prop="aauModel" label="规格型号(AAU)" width="150" align="center" />
                            <el-table-column prop="aauNetworkType" label="网络制式(AAU)" width="150" align="center" />
                            <el-table-column prop="aauConnectionType" label="连接方式" width="150" align="center" />
                            <el-table-column prop="aauOutput" label="输出功率" width="150" align="center" />
                            <el-table-column prop="aauLifeStatus" label="生命周期状态(AAU)" width="120" align="center" />
                            <el-table-column prop="aauHeight" label="AAU挂高(基站)" width="120" align="center" />
                            <el-table-column prop="platform" label="天面（所属平台）" width="120" align="center" />
                            <el-table-column prop="antDirectionAngle" label="方位角" width="120" align="center" />
                            <el-table-column prop="antInnerDownAngle" label="内置下倾角" width="120" align="center" />
                            <el-table-column prop="antMechanicalDownAngle" label="机械下倾角" width="120" align="center" />
                            <el-table-column prop="antElectrDownAngle" label="电下倾角" width="120" align="center" />
                            <el-table-column prop="antTotalDownAngle" label="总俯仰角" width="120" align="center" />
                            <el-table-column prop="antSmartFlag" label="是否智能天线" width="120" align="center" />
                            <el-table-column prop="altitude" label="山高" width="120" align="center" />
                            <el-table-column prop="verticalBeamWidth" label="垂直波束宽度" width="120" align="center" />
                            <el-table-column prop="horizontalBeamWidth" label="水平波束宽度" width="150" align="center" />
                            <el-table-column prop="antGain" label="天线增益" width="150" align="center" />
                            <el-table-column prop="stationNo" label="GNODEB基站编号(站号)" width="150" align="center" />
                            <el-table-column prop="stationName" label="所属站点" width="150" align="center" />
                            <el-table-column prop="machineRoom" label="所属机房(GNODEB)" width="150" align="center" />
                            <el-table-column prop="vipLevel" label="VIP级别" width="200" align="center" />
                            <el-table-column prop="manufacturerName" label="厂商名称" width="150" align="center" />
                            <el-table-column prop="longitude" label="经度" width="150" align="center" />
                            <el-table-column prop="latitude" label="纬度" width="150" align="center" />
                            <!-- <el-table-column fixed="right" label="操作" min-width="120" align="center">
                                <template #default="scope">
                                    <el-button link type="primary" size="small"
                                        @click="showDetailDialog(scope.row.id)">详情</el-button>
                                </template>
                            </el-table-column> -->
                        </el-table>
                        <!-- <el-pagination v-model:current-page="currentPage5g" v-model:page-size="pageSize5g"
                            :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager, next" :total="total5g"
                            @size-change="list5gCellInfoList" @current-change="list5gCellInfoList" /> -->
                        <pagination v-show="total5g > 0" :autoScroll="false" :total="pageSize5g"
                            v-model:page="currentPage5g" v-model:limit="currentPage5g"
                            @pagination="list5gCellInfoList" />
                    </div>
                </el-card>
            </el-tab-pane>
        </el-tabs>

        <el-dialog v-model="detailDialogVisible" title="查看小区详情" width="1200" @closed="closeDialog">
            <el-form :inline="true" :model="cellInfoForm" label-width="100px">
                <el-form-item label="所属区县">
                    <el-input v-model="cellInfoForm.county" disabled style="width: 200px" />
                </el-form-item>
                <el-form-item label="基站名">
                    <el-input v-model="cellInfoForm.siteName" disabled style="width: 670px" />
                </el-form-item>
                <el-form-item label="小区名">
                    <el-input v-model="cellInfoForm.cellName" disabled style="width: 1000px" />
                </el-form-item>
                <el-form-item label="站号">
                    <el-input v-model="cellInfoForm.siteId" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="网络类型">
                    <el-input v-model="cellInfoForm.networkType" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="eNBID">
                    <el-input v-model="cellInfoForm.enbid" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="本地小区ID">
                    <el-input v-model="cellInfoForm.localCellId" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="ECI">
                    <el-input v-model="cellInfoForm.eci" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="物理小区标识">
                    <el-input v-model="cellInfoForm.physicalCellId" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="PCIMOD3">
                    <el-input v-model="cellInfoForm.pciMod3" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="跟踪区">
                    <el-input v-model="cellInfoForm.tac" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="经度">
                    <el-input v-model="cellInfoForm.longitude" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="纬度">
                    <el-input v-model="cellInfoForm.latitude" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="频段">
                    <el-input v-model="cellInfoForm.frequencyBand" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="频点号">
                    <el-input v-model="cellInfoForm.frequencyPoint" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="带宽">
                    <el-input v-model="cellInfoForm.bandwidth" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="站型">
                    <el-input v-model="cellInfoForm.siteType" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="方位角">
                    <el-input v-model="cellInfoForm.azimuth" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="站高">
                    <el-input v-model="cellInfoForm.stationHeight" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="总俯仰角">
                    <el-input v-model="cellInfoForm.totalPitchAngle" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="内置下倾角">
                    <el-input v-model="cellInfoForm.innerPitchAngle" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="电下倾角">
                    <el-input v-model="cellInfoForm.electronicPitchAngle" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="机械下倾角">
                    <el-input v-model="cellInfoForm.mechanicalPitchAngle" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="厂家">
                    <el-input v-model="cellInfoForm.sprodName" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="半功率角">
                    <el-input v-model="cellInfoForm.hpbw" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="网格信息">
                    <el-input v-model="cellInfoForm.gridInfo" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="类型">
                    <el-input v-model="cellInfoForm.bandType" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="共站名">
                    <el-input v-model="cellInfoForm.commonSiteName" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="扇区名">
                    <el-input v-model="cellInfoForm.sectorName" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="扇区">
                    <el-input v-model="cellInfoForm.sector" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="cellInfoForm.description" disabled style="width: 1000px" />
                </el-form-item>
                <el-form-item label="添加时间">
                    <el-input v-model="cellInfoForm.addTime" disabled style="width: 250px" />
                </el-form-item>
                <el-form-item label="enodebOffcsite">
                    <el-input v-model="cellInfoForm.enodebOffcsite" disabled style="width: 250px" />
                </el-form-item>
                <el-form-item label="relatedOffcsite">
                    <el-input v-model="cellInfoForm.relatedOffcsite" disabled style="width: 250px" />
                </el-form-item>
                <el-form-item label="是否远端拉远">
                    <el-input v-model="cellInfoForm.isRemote" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="RRU的DN">
                    <el-input v-model="cellInfoForm.rruModel" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="RRU个数">
                    <el-input v-model="cellInfoForm.rruNumber" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="资管小区名">
                    <el-input v-model="cellInfoForm.ossCellName" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="资管基站名">
                    <el-input v-model="cellInfoForm.ossSiteName" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="物理站ID">
                    <el-input v-model="cellInfoForm.physicalSiteId" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="物理站名称">
                    <el-input v-model="cellInfoForm.physicalSiteName" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="区域类型">
                    <el-input v-model="cellInfoForm.areaType" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="物理站经度">
                    <el-input v-model="cellInfoForm.physicalSiteLongitude" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="物理站纬度">
                    <el-input v-model="cellInfoForm.physicalSiteLatitude" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="塔型">
                    <el-input v-model="cellInfoForm.towerType" disabled style="width: 150px" />
                </el-form-item>
                <el-form-item label="具体塔型">
                    <el-input v-model="cellInfoForm.towerSpecificType" disabled style="width: 150px" />
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup name="audit">

import { ref } from 'vue';

const { proxy } = getCurrentInstance();
// const { nhp_county_type_short } = proxy.useDict("nhp_network_type", "nhp_county_type_short");
const { nhp_county_type } = proxy.useDict("nhp_county_type");
import { query4gCellList, query5gCellList } from '@/api/biz/common'

const pageSize4g = ref(10)
const currentPage4g = ref(1)
const total4g = ref(0)
const cellInfoTableData4g = ref([]);

const pageSize5g = ref(10)
const currentPage5g = ref(1)
const total5g = ref(0)
const cellInfoTableData5g = ref([]);

const queryParams = ref({})
const detailDialogVisible = ref(false)
const cellInfoForm = ref({})
const dialogFormVisible = ref(false)
const queryParams5g = ref({})

const activeName = ref("4g")

const siteTypeOptions = [
    {
        key: "小区分布",
        value: "小区分布"
    },
    {
        key: "室分",
        value: "室分"
    },
    {
        key: "微站",
        value: "微站"
    },
    {
        key: "外打",
        value: "外打"
    },
    {
        key: "宏站",
        value: "宏站"
    },
]

function list4gCellInfoList() {
    const param = {}
    param.pageSize = pageSize4g.value;
    param.pageNum = currentPage4g.value;
    param.county = queryParams.value.county;
    param.cellName = queryParams.value.cellName;
    param.siteName = queryParams.value.siteName;
    param.siteType = queryParams.value.siteType;
    console.log(param, queryParams.value.county)
    query4gCellList(param).then(res => {
        cellInfoTableData4g.value = res.rows
        total4g.value = res.total
    })
}

function list5gCellInfoList() {
    const param = {}
    param.pageSize = pageSize5g.value;
    param.pageNum = currentPage5g.value;
    param.county = queryParams5g.value.county;
    param.networkType = queryParams5g.value.networkType;
    param.cellName = queryParams5g.value.cellName;
    param.siteName = queryParams5g.value.siteName;
    param.siteType = queryParams5g.value.siteType;
    query5gCellList(param).then(res => {
        cellInfoTableData5g.value = res.rows
        total5g.value = res.total
    })
}

function dateFormatter(row, column, cellValue, index) {
    if (!cellValue) { return }
    // 创建一个新的 Date 对象
    var originalDate = new Date(cellValue);

    // 获取年、月、日、时、分、秒
    var year = originalDate.getFullYear();
    var month = ("0" + (originalDate.getMonth() + 1)).slice(-2);
    var day = ("0" + originalDate.getDate()).slice(-2);
    var hours = ("0" + originalDate.getHours()).slice(-2);
    var minutes = ("0" + originalDate.getMinutes()).slice(-2);
    var seconds = ("0" + originalDate.getSeconds()).slice(-2);

    // 格式化输出
    var formattedDateTimeString = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    return formattedDateTimeString;
}

function showDetailDialog(id) {
    let params = {
        id: id
    }
    queryCellsInfoById(params).then(res => {
        cellInfoForm.value = res.data
        cellInfoForm.value.addTime = dateFormatter(null, null, res.data.addTime, null)
        detailDialogVisible.value = true
    })
}

function closeDialog() {
    cellInfoForm.value = {}
    detailDialogVisible.value = false
}

function unsetQueryForm() {
    queryParams.value = {}
    queryParams5g.value = {}
}


list4gCellInfoList()
list5gCellInfoList()

</script>

<style lang="scss" scoped></style>